<template>
  <div class="p-4">
    <h1 class="text-2xl font-bold mb-4">JSON 数据处理器</h1>

    <div class="mb-4">
      <label class="block mb-2">输入 JSON 数据:</label>
      <el-input type="textarea" v-model="jsonData" :rows="6" placeholder="请输入 JSON 数据"></el-input>
    </div>

    <el-button type="primary" @click="initData">初始化</el-button>

    <div class="my-4 p-4 bg-slate-400">{{ dsName }}</div>



    <fastTable ref="mainRef" name="main"></fastTable>

    <div v-if="coreStore.subJsonList.length" class="mt-4">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item :index="item.id" :key="item.id" v-for="item in coreStore.subJsonList">
          {{ item.id + "-" + item.type }}
        </el-menu-item>
      </el-menu>

      <fastTable ref="tabsRef" :name="item.id + '-' + item.type" :key="item.id" v-for="item in coreStore.subJsonList"
        v-show="item.id == activeIndex"></fastTable>

    </div>


    <div class="my-4">
      <el-button @click="onCreate" type="danger">生成代码</el-button>
    </div>

    <div class="mb-4">
      <el-input type="textarea" v-model="aimJson" :rows="4"></el-input>
    </div>
  </div>


</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useCoreStore } from '@/stores/core';
import fastTable from './comm/fastTable.vue';

import { addDicName, areSimilar, clone } from '@/comm/tableTooler'

const coreStore = useCoreStore()
const jsonData = ref("")
const activeIndex = ref('f0')
const aimJson = ref("")
const mainRef = ref(null)
const tabsRef = ref(null)
const dsName = ref("")

let tempGroup = []

onMounted(() => {
  jsonData.value = localStorage.getItem('all_jsonData') || '';
})

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath, activeIndex)
  activeIndex.value = key
}


const initData = () => {
  localStorage.setItem('all_jsonData', jsonData.value);
  const json = JSON.parse(jsonData.value);
  dsName.value = json.dsName
  console.log("json", json)
  coreStore.setFields(json.column);
  tempGroup = json.group

  setTimeout(() => {
    mainRef.value.setProcessedCol(json.column)
  }, 90);

  const subJsonList = json.group.map((item, i) => {
    let column = item.column
    let type = "form";
    if (item.column[0].children) {
      type = "table";
      column = item.column[0].children.column
    }

    setTimeout(() => {
      tabsRef.value[i].setProcessedCol(column)
    }, 90);

    return {
      id: "f" + i,
      type,
      column
    }
  })

  coreStore.setSubJsonList(subJsonList);

  console.log("subJsonList", subJsonList)
}

const onCreate = () => {
  console.log("tabsRef", tabsRef.value)
  const json = JSON.parse(jsonData.value);
  console.log(mainRef.value.processedCol)
  json.column = clone(mainRef.value.processedCol)
  addDicName(json.column)
  // json.group = clone(tempGroup)
  json.group.forEach((item, i) => {
    delete item.originColumn
    delete item.filterColumn
  });
  json.group = json.group.map((item, i) => {
    if (tabsRef.value[i].name.includes("form")) {
      return {
        ...item,
        column: tabsRef.value[i].processedCol
      }
    }
    const obj = {
      ...item
    }
    obj.column[0].children.column = tabsRef.value[i].processedCol
    return obj;
  });
  aimJson.value = JSON.stringify(json, null, 2)
  console.log("json", json)
}


</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>
